#image-modal {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  transform: scale(0);
  display: flex;
  align-items: center;
  justify-content: center;

  .image-modal-backdrop {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(black, 0);
    transition: background 0.2s;
  }

  .image-container {
    padding: 3vh;
    box-sizing: border-box;
    position: relative;
    max-width: 100%;
    transform: scale(0);
    transition: transform 0.2s;
    background: white;

    img {
      max-height: 90vh;
      max-width: 90vw;
    }

    i {
      position: absolute;
      top: 0.2vh;
      right: 0.2vh;
      padding: 0.5vh;
      font-size: 26px;
      cursor: pointer;
    }
  }

  &.visible {
    transform: scale(1);

    .image-modal-backdrop {
      background: rgba(black, 0.55);
    }

    .image-container {
      transform: scale(1);
    }
  }
}

body.image-modal-no-scroll {
  overflow: hidden;
}
